<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span='12'>
            <a-form-item label='商机名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-popup
                v-decorator="['opportunityName', validatorRules.opportunityName]"
                :trigger-change='true'
                org-fields='id,name,customer_name,num,sale_leader,type,stagelabel'
                dest-fields='opportunityId,opportunityName,customerName,opportunityNum,saleLeader,type,stageLabel'
                code='bus_business_opportunity_select'
                :param='{ saleLeader: $store.getters.userInfo.realname }'
                @callback='popupCallback'
              />
            </a-form-item>
            <a-form-item v-show='false'>
              <a-input v-decorator="['opportunityId']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['customerName']"  disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="销售经理" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['saleLeader']"  disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="商机阶段" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['stageLabel']"  disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="产品类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                type="list"
                v-decorator="['type']"
                :trigger-change="true"
                dictCode="icm_bus_business_opportunity_type"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="总价" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['money',validatorRules.money]" placeholder="请输入总价" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="版本" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['version',validatorRules.version]" placeholder="请输入版本"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['archiveFile']" :trigger-change="true"  ></j-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="报价说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['remake']" :autoSize='{minRows:4}' placeholder="请输入报价说明" />
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'HfBusBusinessOfferForm',
    components: {
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        confirmLoading: false,
        validatorRules: {
          opportunityName:{
            rules: [
              { required: true, message: '请点击选择商机名称!' }
            ]
          },
          money:{
            rules:[
              { required:true,message:'请输入报价金额！'}
            ]
          },
          version:{
            rules:[
              { required:true,message:'请输入报价金额！'}
            ]
          }

        },
        url: {
          add: "/bussiness/hfBusBusinessOffer/add",
          edit: "/bussiness/hfBusBusinessOffer/edit",
          queryById: "/bussiness/hfBusBusinessOffer/queryById"
        },
        fields:[
          'createBy','createTime','opportunityId','money','version','archiveFile','remake',
          'opportunityName','saleLeader','type','customerName','stageName','stageLabel'
        ]
      }
    },
    watch: {
      //流程表单的提交的监听事件，用来监听修改或者操作流程的表单
      // 同时需要修改 submitForm方法

      '$store.state.bpm.bpmSubmitStates': {
        immediate: true,
        handler(val) {
          if (val && val.edit && val.edit === '1') {
            this.submitForm().then(res => {
              if (res) {
                this.$store.commit('BPM_SUBMIT_STATES', {edit: '2'})
              }
            })
          }
        },
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,this.fields))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm() {
        const that = this
        return new Promise(((resolve, reject) => {
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true
              let httpurl = ''
              let method = ''
              if (!this.model.id) {
                httpurl += this.url.add
                method = 'post'
              } else {
                httpurl += this.url.edit
                method = 'put'
              }
              let formData = Object.assign(this.model, values)
              console.log('表单提交数据', formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(true)
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
              })
            } else {
              this.$store.commit('BPM_SUBMIT_STATES', {})
            }
          })
        }))
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,this.fields))
      },
    }
  }
</script>